<template>
    <div class="searchbar-wrapper" :style="{ backgroundColor: 'outer-bg' }">
        <div :style="{ backgroundColor: 'inner-bg' }" :class="{ 'border': 'has-border' }">
            <img src="../assets/images/search.png" alt="">
            <span>想吃什么搜这里，比如：川菜</span>
        </div>
    </div>
</template>
<script setup lang='ts'>


defineProps(['outer-bg', 'inner-bg', 'has-border'])
</script>

<style scoped lang="scss">
.searchbar-wrapper {
    padding: 10px 15px;

    >div {
        width: 100%;
        height: 40px;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px #ee7530 solid;

        img {
            width: 20px;
        }

        span {
            font-size: 12px;
        }
    }
}
</style>